<template>
  <div>
    <jgSearch
      :searchData="searchData"
      @on-change-change="askDataing"
      @on-change-changes="getDatas"
      @on-change-changess="askDatachangess"
      @on-change-changetag="changetag"
      @on-enter-input="inputaskData"
      @on-clear-input="inputaskData"
    >
      <template v-slot:orderedradio>
        <RadioGroup type="button" v-model="type" @on-change="changetype(type)">
          <Radio :label="2">今</Radio>
          <Radio :label="1">昨</Radio>
          <Radio :label="5">月</Radio>
        </RadioGroup>
      </template>
      <template v-slot:tag>
        <tags
          @sunchangetag="sunchangetag"
          :tags_ids="params.tags_ids"
          :project_tags_ids="params.project_tags_ids"
        ></tags>
      </template>
      <template v-slot:department>
        <Select
          placeholder="选择部门"
          v-width="120"
          clearable
          @on-change="changeDept"
          v-model="params.department_id"
        >
          <Option
            :value="+item.value"
            v-for="item in belongData"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </template>
      <template v-slot:belong>
        <Select
          placeholder="归属人"
          v-model="belong_member_id"
          multiple
          filterable
          @on-change="askDataing"
        >
          <Option
            :value="item.value"
            v-for="item in menberList"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </template>
      <template v-slot:city>
        <!-- <Select
                    v-model="area_code"
                    placeholder="请输入城市"
                    filterable
                    remote
                    clearable
                    :remote-method="remoteMethod"
                    @on-change="getDatas"
                    :loading="loadingcity"
                >
                    <Option
                        v-for="(item, index) in optionscity"
                        :key="index"
                        :value="item.value"
                        :label="item.label"
                        >{{ item.label }}</Option
                    >
                </Select> -->
        <jgcheckcity
          ref="checkcity"
          @cityvalue="cityvalue"
          v-model="area_code"
          name="orderedpatient"
        ></jgcheckcity>
      </template>
    </jgSearch>
    <tablelist
      @askData="askDatas"
      :params="params"
      :columns="columns"
      :list="list"
      :loading="loading"
      :total="total"
      currentTab="ordered"
    ></tablelist>
  </div>
</template>
<script>
import dayjs from "dayjs";
import {
  patientindexoperatearrivelist,
  customerwechattagslist,
} from "@/api/hqapi";
import jgSearch from "@/components/search";
// import jgcheckcity from '@/components/checkcity';
import tablelist from "./tablelist";
// import mixins from './mixins';
import tags from "@/components/tags";
import tagmixins from "@/mixins/tagmixins";
import { patientindextagsconditionlistv2 } from "@/api/hqapi/tags";
import searchTree from "@riophae/vue-treeselect";
export default {
  name: "orderedpatient",
  components: { tablelist, jgSearch, tags, searchTree },
  mixins: [tagmixins],
  data() {
    return {
      searchData: {
        project: [
          { id: 1, key: "slot", keys: "orderedradio" },
          {
            id: 4,
            key: "DatePicker",
            transfer: true,
            format: "yyyy-MM-dd",
            placeholder: "请选择预约时间",
            options: {
              disabledDate(date) {
                return date && date.valueOf() > Date.now();
              },
            },
            style: { width: "200px" },
            value: [new Date(), new Date()],
            type: "daterange",
            callback: "changes",
          },
          {
            id: 5,
            key: "Input",
            placeholder: "请输入患者姓名/手机号/微信号/唯一身份",
            clearable: true,
            style: { width: "270px" },
            value: "",
            callback: "input",
          },
          {
            id: 6,
            key: "Select",
            transfer: true,
            style: { minWidth: "100px" },
            placeholder: "患者状态",
            field: { value: "id", label: "status_name" },
            value: "",
            childList: [],
            clearable: true,
            callback: "change",
          },
          { id: 7, key: "slot", keys: "department" },
          { id: 11, key: "slot", keys: "belong" },
          // { id: 7, key: 'Select', transfer: true, style: { minWidth: '200px' },multiple: true, placeholder: '归属人', Group: true, value: '', childList: [], clearable: true, callback: 'change' },
          // { id: 10, key: 'Selects', transfer: true, Group: true, style: { minWidth: '200px' },field:{label:'tag_name',value: 'tag_id'}, placeholder: '请先选择归属人再选择标签', clearable: true, value: [], childList: [], filterable: true, multiple: true, maxTagCount: 3, callback: 'changess' },
          // { id: 30, key: 'slot', keys: 'tag' },
          {
            id: 30,
            key: "TreeSelect",
            placeholder: "请选择个人标签",
            multiple: true,
            clearable: true,
            style: { width: "200px" },
            value: "",
            childList: [],
            callback: "change",
          },
          {
            id: 31,
            key: "Select",
            placeholder: "请选择部门标签",
            multiple: true,
            clearable: true,
            style: { width: "200px" },
            value: "",
            childList: [],
            callback: "change",
          },
          {
            id: 8,
            key: "TreeSelect",
            transfer: true,
            style: { minWidth: "100px" },
            placeholder: "病种",
            value: "",
            childList: [],
            clearable: true,
            callback: "change",
          },
          {
            id: 12,
            key: "Select",
            transfer: true,
            style: { minWidth: "100px" },
            placeholder: "对话方式",
            value: "",
            childList: [],
            clearable: true,
            callback: "change",
          },
          {
            id: 20,
            key: "Select",
            transfer: true,
            style: { minWidth: "100px" },
            placeholder: "部位",
            multiple: true,
            maxTagCount: 3,
            value: [],
            childList: [],
            clearable: true,
            callback: "change",
          },
          {
            id: 9,
            key: "TreeSelect",
            transfer: true,
            maxTagCount: 3,
            style: { minWidth: "100px" },
            placeholder: "渠道来源",
            multiple: true,
            value: [],
            childList: [],
            clearable: true,
            callback: "change",
          },
          { id: 13, key: "slot", keys: "city" },
        ],
      },
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      columns: [
        {
          title: "基本信息",
          key: "basic",
          slot: "info",
          width: 135,
          fixed: "left",
        },
        { title: "患者状态", key: "state", slot: "state", width: 100 },
        { title: "归属人", key: "realname", width: 120 },
        {
          title: "预到时间",
          key: "appointment_time_str",
          sortable: "custom",
          width: 108,
        },
        {
          title: "预约时间",
          key: "operate_order_time_str",
          sortable: "custom",
          width: 108,
        },
        {
          title: "回访次数",
          key: "callback_count",
          sortable: "custom",
          width: 108,
        },
        {
          title: "未访天数",
          sortable: "custom",
          key: "uncallback_day",
          filteredValue: [],
          filters: [
            {
              label: "0-10天未访",
              value: "1",
            },
            {
              label: "11-20天未访",
              value: "2",
            },
            {
              label: "21-30天未访",
              value: "3",
            },
            {
              label: "31-60天未访",
              value: "4",
            },
            {
              label: "60天以上未访",
              value: "5",
            },
          ],
          filterMultiple: false,
          filterRemote(value) {
            this.filterType = value[0];
          },
          width: 130,
        },
        { title: "部位", slot: "labels", width: 200 },
        {
          title: "未到天数",
          key: "belong_assign_time_day",
          sortable: "custom",
          width: 108,
        },
        { title: "患者标签", key: "label", slot: "label", width: 260 },
        {
          title: "城市",
          key: "city_name",
          width: 200,
        },
        { title: "病种", slot: "disease", width: 200 },
        { title: "对话方式", key: "dialog_mode_name", width: 108 },
        {
          title: "来源",
          width: 120,
          key: "source_name",
          slot: "channel",
          sortable: "custom",
        },
        {
          title: "创建时间",
          key: "created_at_str",
          sortable: "custom",
          width: 135,
        },
        {
          title: "备注",
          minWidth: 250,
          key: "remark",
          ellipsis: true,
          tooltip: true,
        },
        { title: "操作", width: 145, slot: "action", fixed: "right" },
      ],
      filterType: "",
      belong_member_id: [],
      params: {
        area_code: "",
        dialog_mode_id: "",
        created_stime: new Date(),
        created_etime: new Date(),
        appointment_stime: new Date(),
        appointment_etime: new Date(),
        revisiting_stime: new Date(),
        revisiting_etime: new Date(),
        operate_stime: new Date(),
        operate_etime: new Date(),
        keywords: "",
        channel_id: [],
        department_id: "",
        belong_member_id: "",
        patient_status_id: "",
        tags_ids: "",
        project_tags_ids: "",
        is_attention: "",
        sort_appointment_time: 0,
        sort_callback_count: 0,
        sort_last_callback_time: 0,
        sort_created_at: 0,
        page: 1,
        pageSize: 10,
        have_mobile: 0,
        have_wechat: 0,
        have_repeat: 0,
        body_parts_id: "",
        have_contact_type: "",
      },
      loading: false,
      list: [],
      total: 0,
      type: 2,
      area_code: [],
      page: 1,
      pageSize: 10,
      belongData: [],
      menberList: [],
    };
  },
  mounted() {
    let Projectid = localStorage.getItem("currentProject");
    let Projectcity = JSON.parse(localStorage.getItem("project"));
    for (let item of Projectcity) {
      if (+Projectid === +item.project_id && item.city_name !== "") {
        this.optionscity = [
          {
            key: item.default_city,
            value: item.default_city,
            label: item.city_name,
          },
        ];
      }
    }
  },
  methods: {
    changeDept(e, type = false) {
      this.params.department_id = e;
      this.belong_member_id = [];
      this.menberList = [];
      this.belongData.forEach((item) => {
        if (item.value == e) {
          this.menberList = item.children;
        }
      });
      if (!e) {
        this.belongData.forEach((item) => {
          if (item && item.children.length > 0) {
            this.menberList = [...this.menberList, ...item.children];
          }
        });
      }
      this.askDataing();
    },

    condition(res) {
      this.searchData.project.forEach((item) => {
        if (item.id === 6) {
          if (res.status_list) item.childList = res.status_list;
        } else if (item.id === 7) {
          if (res.member_list) item.childList = res.member_list;
          this.belongData = res.member_list;
          this.menberList = [];
          res.member_list.forEach((item) => {
            if (item && item.children.length > 0) {
              this.menberList = [...this.menberList, ...item.children];
            }
          });
        } else if (item.id === 8) {
          if (res.diseases) item.childList = res.diseases;
        } else if (item.id === 9) {
          if (res.source_channel) item.childList = res.source_channel;
        } else if (item.id === 10) {
          if (res.tags_list) item.childList = res.tags_list;
        } else if (item.id === 12) {
          if (res.talk_way) item.childList = res.talk_way;
        } else if (item.id === 20) {
          if (res.talk_way) item.childList = res.body_parts;
        }
      });
    },
    initial(e) {
      this.gettags();
      this.params.page = 1;
      this.askData();
    },
    askDatas(e) {
      this.params = e;
      this.askData();
    },
    askDataing() {
      this.params.page = 1;
      this.askData();
    },
    inputaskData() {
      this.params.page = 1;
      this.params.have_mobile = 0;
      this.params.have_wechat = 0;
      this.params.have_repeat = 0;
      this.params.is_attention = 0;
      this.params.city_id = "";
      this.type = undefined;
      this.searchData.project.forEach((item) => {
        if (item.id === 4) {
          item.value = [];
        } else if (item.id === 6) {
          item.value = "";
        } else if (item.id === 7) {
          item.value = "";
        } else if (item.id === 8) {
          item.value = "";
        } else if (item.id === 9) {
          item.value = "";
        } else if (item.id === 10) {
          item.value = [];
          item.childList = [];
        } else if (item.id === 12) {
          item.value = [];
        } else if (item.id === 20) {
          item.value = [];
        } else if (item.id === 21) {
          item.value = "";
        }
      });
      this.askData();
    },
    cityvalue(city) {
      this.area_code = city;
      this.params.area_code = city.join(",");
      this.params.page = 1;
      this.askData();
    },
    getDatas() {
      for (let item of this.columns) {
        if (item.title === "未访天数") {
          item.filteredValue = [];
          this.params.not_callback_start = "";
          this.params.not_callback_end = "";
        }
      }
      this.type = undefined;
      this.params.page = 1;
      this.askData();
    },
    askDatachangess() {
      this.params.page = 1;
      this.searchData.project.forEach((item) => {
        if (item.id === 10) {
          this.params.tags_ids = item.value.join(",");
        }
      });
      this.askData();
    },
    changetype(type) {
      for (let item of this.columns) {
        if (item.title === "未访天数") {
          item.filteredValue = [];
          this.params.not_callback_start = "";
          this.params.not_callback_end = "";
        }
      }
      let week = dayjs().day();
      let weekday = dayjs()
        .add(7 - week, "day")
        .format("YYYY-MM-DD");
      let today = dayjs().format("YYYY-MM-DD");
      let yesday = dayjs()
        .subtract(1, "day")
        .format("YYYY-MM-DD");
      let tomday = dayjs()
        .add(1, "day")
        .format("YYYY-MM-DD");
      let sday = dayjs(`${dayjs().format("YYYY-MM")}-1`).format("YYYY-MM-DD");
      let eday = dayjs(`${dayjs().year()}-${dayjs().month() + 2}`)
        .subtract(1, "day")
        .format("YYYY-MM-DD");
      this.searchData.project.forEach((item) => {
        if (item.id === 4) {
          if (type === 1) item.value = [yesday, yesday];
          if (type === 2) item.value = [today, today];
          if (type === 3) item.value = [tomday, tomday];
          if (type === 4) item.value = [today, weekday];
          if (type === 5) item.value = [sday, eday];
        }
      });
      this.params.page = 1;
      this.askData();
    },
    askData() {
      this.loading = true;
      this.getparams();
      let params = JSON.parse(JSON.stringify(this.params));
      // params.area_code = this.area_code
      patientindexoperatearrivelist(params).then((res) => {
        this.list = res.list;
        if (+this.params.page === 1) this.total = res.total;
        this.$emit("alltotal", { key: "oprate_arrive", total: res.total });
        this.loading = false;
      });
    },
    getparams() {
      this.searchData.project.forEach((item) => {
        if (item.id === 4) {
          this.params.created_stime = item.value[0] ? item.value[0] : "";
          this.params.created_etime = item.value[1] ? item.value[1] : "";
          this.params.appointment_stime = item.value[0] ? item.value[0] : "";
          this.params.appointment_etime = item.value[1] ? item.value[1] : "";
          this.params.revisiting_stime = item.value[0] ? item.value[0] : "";
          this.params.revisiting_etime = item.value[1] ? item.value[1] : "";
          this.params.operate_stime = item.value[0] ? item.value[0] : "";
          this.params.operate_etime = item.value[1] ? item.value[1] : "";
        } else if (item.id === 5) {
          this.params.keywords = item.value;
        } else if (item.id === 6) {
          this.params.patient_status_id = item.value;
        } else if (item.id === 11) {
          this.params.belong_member_id = this.belong_member_id
            ? this.belong_member_id.join(",")
            : "";
        } else if (item.id === 8) {
          this.params.patient_diseases_id = item.value;
        } else if (item.id === 9) {
          if (item.value.length > 0)
            this.params.channel_id = item.value.join(",");
          else this.params.channel_id = "";
        } else if (item.id === 12) {
          this.params.dialog_mode_id = item.value;
        } else if (item.id === 20) {
          this.params.body_parts_id = item.value.join(",");
        } else if (item.id === 21) {
          this.params.have_contact_type = item.value;
        } else if (item.id == 30) {
          let list = [];
          for (let it of item.value) {
            list.push(it.split(",")[0]);
          }
          this.params.tags_ids = list.join(",");
        } else if (item.id == 31) {
          let list = [];
          for (let it of item.value) {
            list.push(it.split(",")[0]);
          }
          this.params.project_tags_ids = list.join(",");
        }
      });
    },
    gettags() {
      patientindextagsconditionlistv2().then((res) => {
        this.searchData.project.forEach((item) => {
          if (item.id == 30) {
            item.value = "";
            item.childList = res.self_tags;
          } else if (item.id == 31) {
            item.value = "";
            item.childList = res.project_tags;
          }
        });
      });
    },
    changetag(member_id = "") {
      customerwechattagslist({ member_id }).then((res) => {
        this.searchData.project.forEach((item) => {
          if (item.id === 10) {
            item.value = [];
            item.childList = res.list;
          }
        });
        this.params.page = 1;
        this.askData();
      });
    },
  },
};
</script>
